<script lang="ts">
	import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import { createEventDispatcher } from 'svelte';
	import { Divider } from '$components/basic';
	import Tab, { Label as TabLabel } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import Textfield from '@smui/textfield';
	import Checkbox from '@smui/checkbox';
	import { useUserstore } from '@/store';
	import { goto } from '$utils/intercept';

	let active = 'Home';
	let checked = false;

	const dispatcher = createEventDispatcher();

	let open = false;
	let clicked = 'Nothing yet.';

	export const openDialog = () => (open = true);

	let username = '';
	let password = '';

	const toLogin = (params: CustomEvent) => {
		useUserstore().login({ username, password }, false);
	};

	const toRegister = () => ((open = false), goto('/register'));
	const toForget = () => ((open = false), goto('/forget'));
</script>

<div class="w-full flex-cc h-full">
	<div class="w-1320px login-wrapper h-full max-w-100% min-w-350px py-20px">
		<!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
		<div class="w-1/2 h-fit flex flex-row-reverse pt-40px">
			<div class="w-600px h-fit p-20px shadow-2xl flex flex-col">
				<Title id="simple-title">Login</Title>
				<Content id="simple-content">
					<form>
						<div class="flex flex-row items-center gap-10px">
							<Label for="username" class="w-80px">E-mail</Label>
							<Textfield
								type="text"
								name="username"
								style="flex: 0.8"
								autocomplete="on"
								bind:value={username}
							/>
						</div>
						<div class="flex flex-row items-center gap-10px">
							<Label for="password" class="w-80px">Password</Label><Textfield
								style="flex: 0.8"
								type="password"
								name="password"
								autocomplete="off"
								bind:value={password}
							/>
						</div>
					</form>
				</Content>
				<Actions class="flex flex-row justify-start">
					<Button on:click={toLogin} variant="raised" defaultAction use={[InitialFocus]}>
						<Label>Log in</Label>
					</Button>
					<Checkbox bind:checked style="width: 20px; height: 20px" />
					<span class="font-size-10px"> Remember me </span>

					<!-- svelte-ignore a11y-click-events-have-key-events -->
					<!-- svelte-ignore a11y-missing-attribute -->
					<!-- svelte-ignore a11y-no-static-element-interactions -->
					<a class="mdc-button font-size-10px!" on:click={toRegister}>New Account</a>
					<span class="h-1em"><Divider direction="vertical" /></span>

					<!-- svelte-ignore a11y-click-events-have-key-events -->
					<!-- svelte-ignore a11y-missing-attribute -->
					<!-- svelte-ignore a11y-no-static-element-interactions -->
					<a class="mdc-button font-size-10px!" on:click={toForget}>Lost your password?</a>
					<div class="flex-1"></div>
				</Actions>
			</div>
		</div>
	</div>
</div>

<!-- <Button on:click={() => (open = true)}>
	<Label>Open Dialog</Label>
</Button> -->

<style>
	.login-wrapper {
		/* background: #f0f0f0; */
		background-image: url('$lib/images/login.svg');
		background-size: auto;
		background-repeat: no-repeat;
		background-position: center right;
		object-fit: cover;
	}
</style>
